<template>
  <div class="clearfix">
    <Button type="primary" shape="round" size="small" v-if="visibleButtons" @click="onButtonClick">
      {{ btnTitle }}
    </Button>
    <Button
      type="danger"
      shape="round"
      size="small"
      v-if="visibleDelButtons"
      @click="onButtonDelClick"
    >
      删除
    </Button>
    <Button
      type="primary"
      shape="round"
      size="small"
      v-if="visibleAddButtons"
      @click="onButtonAddClick"
    >
      添加
    </Button>
    <Description
      :title="popTitle"
      :collapseOptions="{ canExpand: false, helpMessage: popHelp }"
      :column="1"
      bordered
      :data="tableData"
      :schema="tableSchema"
      size="small"
    >
      <template #extra>
        // 这里不生效的原因是因为封装了一层,不是原生
        <Button type="primary">Edit</Button>
      </template>
    </Description>
    <Space :size="8">
      <Button type="primary" size="small" v-if="visibleStatus" @click="onButtonClickFire">
        消防安全排查(<Tag :color="getFireColor()">{{ getFireText() }}</Tag
        >)
      </Button>
      <Button type="primary" size="small" v-if="visibleStatus" @click="onButtonClickPolice">
        重点村综合整治排查(<Tag :color="getPoliceColor()">{{ getPoliceText() }}</Tag
        >)
      </Button>
      <Button type="primary" size="small" v-if="visibleStatus" @click="onButtonClickZhujian">
        自建房安全排查(<Tag :color="getZhujianColor()">{{ getZhujianText() }}</Tag
        >)
      </Button>
    </Space>
  </div>
</template>
<script>
  import { Description } from '/@/components/Description/index';
  import {
    Tabs,
    Space,
    Divider,
    Drawer,
    Tag,
    Collapse,
    Button,
    Popover,
    Row,
    Col,
  } from 'ant-design-vue';
  import { inject } from 'vue';

  export default {
    name: 'MaplibPopup',
    components: {
      Description,
      Tabs,
      Space,
      Divider,
      Drawer,
      Tag,
      Collapse,
      Button,
      Popover,
      Row,
      Col,
    },
    props: {
      obj: {
        type: Object,
      },
      tableSchema: {
        type: Array,
      },
      btnTitle: {
        default: '查看场所',
        type: String,
      },
      popTitle: {
        default: '详情',
        type: String,
      },
      popHelp: {
        default: '详情',
        type: String,
      },
      visibleButtons: {
        default: false,
        type: Boolean,
      },
      visibleDelButtons: {
        default: false,
        type: Boolean,
      },
      visibleAddButtons: {
        default: false,
        type: Boolean,
      },
      visibleStatus: {
        default: false,
        type: Boolean,
      },
    },
    computed: {
      tableData: function () {
        var gf = this.obj;
        if (gf) {
          console.log('popup obj===================');
          console.log(gf);
          return gf;
        }

        return {};
      },
    },
    created() {
      this.__theMitt = inject('theMitt');
    },
    methods: {
      complexityValueType(v) {
        if (typeof v == 'object') {
          return true;
        }

        return false;
      },
      onClickOk() {
        var gf = this.obj;
        this.__theMitt.emit('clickok', gf);
      },
      onButtonClick() {
        var gf = this.obj;
        this.__theMitt.emit('clickbutton', gf);
      },
      // 删除
      onButtonDelClick() {
        var gf = this.obj;
        this.__theMitt.emit('clickButtonDel', gf);
      },
      // 添加
      onButtonAddClick() {
        var gf = this.obj;
        this.__theMitt.emit('clickButtonAdd', gf);
      },
      onButtonClickFire() {
        var gf = this.obj;
        this.__theMitt.emit('clickbuttonfire', gf);
      },
      onButtonClickPolice() {
        var gf = this.obj;
        this.__theMitt.emit('clickbuttonpolice', gf);
      },
      onButtonClickZhujian() {
        var gf = this.obj;
        this.__theMitt.emit('clickbuttonzhujian', gf);
      },

      getFireColor() {
        return this.getFireColorAndText().color;
      },
      getFireText() {
        return this.getFireColorAndText().text;
      },
      getPoliceColor() {
        return this.getPoliceColorAndText().color;
      },
      getPoliceText() {
        return this.getPoliceColorAndText().text;
      },
      getZhujianColor() {
        return this.getZhujianColorAndText().color;
      },
      getZhujianText() {
        return this.getZhujianColorAndText().text;
      },
      getFireColorAndText() {
        if (this.tableData) {
          if (this.tableData['levelFire']) {
            if ('0' == this.tableData['levelFire']) {
              return { color: 'green', text: '未排查' };
            } else if ('1' == this.tableData['levelFire']) {
              return { color: 'red', text: '严重隐患' };
            } else if ('2' == this.tableData['levelFire']) {
              return { color: 'green', text: '无隐患' };
            } else if ('3' == this.tableData['levelFire']) {
              return { color: 'orange', text: '一般隐患' };
            }
          }
        }

        return { color: 'yellow', text: '状态未知' };
      },
      getPoliceColorAndText() {
        if (this.tableData) {
          if (this.tableData['levelPolice']) {
            if ('0' == this.tableData['levelPolice']) {
              return { color: 'green', text: '未排查' };
            } else if ('1' == this.tableData['levelPolice']) {
              return { color: 'red', text: '严重隐患' };
            } else if ('2' == this.tableData['levelPolice']) {
              return { color: 'green', text: '无隐患' };
            } else if ('3' == this.tableData['levelPolice']) {
              return { color: 'orange', text: '一般隐患' };
            }
          }
        }

        return { color: 'yellow', text: '状态未知' };
      },
      getZhujianColorAndText() {
        if (this.tableData) {
          if (this.tableData['levelHousing']) {
            if ('0' == this.tableData['levelHousing']) {
              return { color: 'green', text: '未排查' };
            } else if ('1' == this.tableData['levelHousing']) {
              return { color: 'red', text: '严重隐患' };
            } else if ('2' == this.tableData['levelHousing']) {
              return { color: 'green', text: '无隐患' };
            } else if ('3' == this.tableData['levelHousing']) {
              return { color: 'orange', text: '一般隐患' };
            }
          }
        }

        return { color: 'yellow', text: '状态未知' };
      },
    },
  };
</script>
<style scoped>
  .ant-tag {
    margin-right: 0px;
  }
</style>
